<template>
  <ul class="data-list-container">
    <li v-for="(item, i) in list" :key="item.id">
      <Avatar
        :url="item.avatar"
        :size="44"
        class="ava"
        :style="{
          borderRadius: `80% ${randomNumbers[i]}% 83% 17% / 25%  ${randomNumbers[i]}% 77% 75%`
        }"
      />
      <div class="data">
        <div class="nickname">{{ item.nickname }}</div>
        <div class="content">{{ item.content }}</div>
        <div class="time">{{ formatDate(item.createDate, true) }}</div>
      </div>
    </li>
  </ul>
</template>

<script></script>

<script setup>
import { ref, watch } from 'vue'
import { formatDate } from '@/utils'
import Avatar from '@/components/Avatar/index.vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
let len = ref(0)
len.value = props.list.length
let randomNumbers = ref([])
watch(
  () => props.list,
  (newVal) => {
    len.value = newVal.length
    randomNumbers.value = []
    for (let i = 0; i < len.value; i++) {
      randomNumbers.value.push(Math.floor(Math.random() * 100) + 1)
    }
  }
)
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';

.data-list-container {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid lighten($gray, 20%);
  padding: 15px 0;
}

.avatar-container {
  margin-right: 15px;
  // box-shadow: none;
}

.nickname {
  color: darken($success, 10%);
  margin-bottom: 10px;
}

.content {
  width: 70%;
  font-size: 14px;
}

.data {
  flex: 1 1 auto;
  position: relative;
}

.time {
  position: absolute;
  right: 0;
  top: 5px;
  font-size: 12px;
  color: $gray;
}
</style>
